<template>
    <div class="virtual-board">
        <div>
            <div class="virtual-board-item" @click="tapBoard('7')">7</div>
            <div class="virtual-board-item" @click="tapBoard('8')">8</div>
            <div class="virtual-board-item" @click="tapBoard('9')">9</div>
            <div class="width2x virtual-board-item" @click="clickPlus('20')">20</div>
        </div>
        <div>
            <div class="virtual-board-item" @click="tapBoard('4')">4</div>
            <div class="virtual-board-item" @click="tapBoard('5')">5</div>
            <div class="virtual-board-item" @click="tapBoard('6')">6</div>
            <div class="width2x virtual-board-item" @click="clickPlus('50')">50</div>
        </div>
        <div>
            <div class="virtual-board-item" @click="tapBoard('1')">1</div>
            <div class="virtual-board-item" @click="tapBoard('2')">2</div>
            <div class="virtual-board-item" @click="tapBoard('3')">3</div>
            <div class="width2x virtual-board-item" @click="clickPlus('100')">100</div>
        </div>
        <div>
            <div class="virtual-board-item" @click="tapBoard('C')">C</div>
            <div class="virtual-board-item" @click="tapBoard('0')">0</div>
            <div class="virtual-board-item" @click="tapBoard('.')">.</div>
            <div class="width2x virtual-board-item" @click="tapBoard('back')">
                <i class="el-icon-back"></i>
            </div>
        </div>
        <!--<div class="submit-btn-wrap">-->
            <!--<div :class="['submit-btn', disabled ? 'disabled': '']" @click="confirm">-->
                <!--确认收银-->
            <!--</div>-->
        <!--</div>-->
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: [String, Number],
                default: 0.00
            },
            disabled: Boolean,
        },
        data() {
            return {
                number: "",
            }
        },
        created() {
            this.number = this.value + ''
        },
        mounted() {

        },
        watch: {
            number(val) {
                this.number = val
            }
        },

        computed: {
            result: function () {
                let num = +this.number
                return num.toFixed(2)
            },
            float: function () {
                let number = this.number + ''
                return number.indexOf('.') > 0
            },
        },
        methods: {
            tapBoard(char) {
                if (char == 'C') {
                    this.number = ''
                    this.changeResult()
                    return;
                }
                if (char == 'back') {
                    this.number = this.number.slice(0, -1)
                    this.changeResult()
                    return;
                }
                if (this.float) {
                    let decimal = this.number.split('.')[1]
                    if (decimal.length >= 2) return
                }
                if (char == '.') {
                    if (this.float) return;
                }
                this.number += char
                this.changeResult()
            },
            clickPlus(num) {
                let a = +num
                let b = +this.number
                let result = a + b
                this.number = result.toString()
                this.changeResult()
            },
            changeResult() {
                this.$emit('change', this.number)
            },
            confirm() {
                if (this.disabled) return
                this.$emit('confirm')
            },
            reset() {
                this.number = ''
            }
        },
    }
</script>

<style scoped>
    .virtual-board {
        display: flex;
        justify-content: center;
        flex-direction: column;
        border-radius: 5px;
        width: 100%;
    }

    .virtual-board > div {
        display: flex;
        justify-content: center;
    }

    .virtual-board-item {
        flex: 0 0 20%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #999;
        font-size: 30px;
        margin: 1% 3%;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .virtual-board-item:active {
        background: #e7e7e7;
    }

    .width2x {
        flex: 0 0 20%;
        border-radius: 10px;
    }

    .submit-btn-wrap {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .submit-btn {
        flex: 1;
        max-width: 370px;
        padding: 15px;
        border-radius: 50px;
        background: #409EFF;
        color: #fff;
        text-align: center;
        box-sizing: border-box;
    }

    .submit-btn:active {
        background: #3a8ee6;
        border-color: #3a8ee6;
        outline: none;
    }

    .submit-btn.disabled {
        background-color: #a0cfff;
        border-color: #a0cfff;
    }

    .submit-btn.disabled:active {
        background-color: #a0cfff;
        border-color: #a0cfff;
    }
</style>
